<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>directive</title>
</head>

<body ng-app="direcitveApp">
    <div echo1></div>
    <div echo2></div>
    <div echo3></div>
    <script src="../js/angular.js"></script>
    <script>
        angular.module('direcitveApp', [])
            .controller('myCtrl', function ($scope) {})
            .directive('echo1', function () {
                return {
                    restrict: 'EACM',
                    template: '<span><echo2></echo2></span>',
                    compile: function () {
                        console.log('compile1开始执行');
                    }
                }
            })
            .directive('echo2', function () {
                return {
                    restrict: 'EACM',
                    compile: function () {
                        console.log('compile2开始执行');
                    }
                }
            })
            .directive('echo3', function () {
                return {
                    restrict: 'EACM',
                    compile: function () {
                        console.log('compile3开始执行');
                    }
                }
            })
    </script>
</body>

</html>